<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>链路日志跟踪平台</title>
    <link rel="shortcut icon" href="../resource/favicon.ico">
    <link href="../resource/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="../resource/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="../resource/lib/datatable/css/jquery.dataTables.css" rel="stylesheet">
    <link href="../resource/lib/datatable/css/dataTables.jqueryui.css" rel="stylesheet">
    <link href="../resource/lib/datatable/css/jquery.dataTables_themeroller.css" rel="stylesheet">

    <link href="../resource/css/animate.min.css" rel="stylesheet">
    <link href="../resource/css/style.min862f.css?v=4.1.0" rel="stylesheet">

    <style>
        /* 输入框和下拉框圆角  */
        .borderRadius input {
            border-radius: 4px;
        }

        .borderRadius select {
            border-radius: 4px;
        }
    </style>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <!--查询面板-->
    <div class="panel panel-default">
        <div class="ibox-form">
            <form id="mainTracelogForm" class="form-horizontal borderRadius" role="form">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">主链路ID</label>
                            <div class="col-sm-8">
                                <input class="form-control" placeholder="请输入主链路ID" name="traceId" maxlength="32" type="text" oninput = "value=value.replace(/[^\d]/g,'')" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">服务名称</label>
                            <div class="col-sm-8">
                                <input class="form-control" placeholder="请输入服务名称" name="serviceName" type="text" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">任务名称</label>
                            <div class="col-sm-8">
                                <input class="form-control" placeholder="请输入任务名称" name="name" type="text" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">状态</label>
                            <div class="col-sm-8">
                                <select class="form-control" name="resultFlag">
                                    <option value="">全部</option>
                                    <option value="0">成功</option>
                                    <option value="1">失败</option>
                                    <option value="2">部分成功</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <!-- 保存|取消 -->
            <div class="row">
                <div class="col-sm-12">
                    <div style="text-align: right">
                        <button class="btn btn-primary" onclick="search()">查询</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <form id="pollingTimeForm" class="form-horizontal borderRadius" role="form">
                <div class="form-group">
                    <div class="col-sm-1">
                        <select class="form-control" id="pollingTime" name="pollingTime" onchange="poll()">
                            <option value="5">5秒</option>
                            <option value="10">10秒</option>
                            <option value="30">30秒</option>
                            <option value="60">60秒</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!--表格面板-->
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <table id="mainTracelogTable"
                           class="table table-condensed margin-top10" style="word-break:break-all;" ></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 详情 -->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-body">
                <form id="mainDetailForm" class="form-horizontal borderRadius" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">主链路ID</label>
                        <div class="col-sm-9">
                            <input class="form-control" name="traceId" type="text" autocomplete="off" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">服务名称</label>
                        <div class="col-sm-9">
                            <input class="form-control" name="serviceName" type="text" autocomplete="off" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">任务名称</label>
                        <div class="col-sm-9">
                            <input class="form-control" name="name" type="text" autocomplete="off" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">结果</label>
                        <div class="col-sm-9">
                            <select class="form-control" name="resultFlag" readonly="readonly">
                                <option value="0">成功</option>
                                <option value="1">失败</option>
                                <option value="2">部分成功</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">开始时间</label>
                        <div class="col-sm-9">
                            <input class="form-control" name="startTime" type="text" autocomplete="off" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">结束时间</label>
                        <div class="col-sm-9">
                            <input class="form-control" name="endTime" type="text" autocomplete="off" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">耗时(ms)</label>
                        <div class="col-sm-9">
                            <input class="form-control" name="elapsedTime" type="text" autocomplete="off" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">输入</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" name="input" readonly="readonly" rows="5"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">输出</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" name="output" readonly="readonly" rows="10"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script>
    let searchUrl = "/ui/tracelog/search-main"
</script>

<script src="../resource/js/jquery.min.js?v=2.1.4"></script>
<script src="../resource/js/bootstrap.min.js?v=3.3.6"></script>
<script src="../resource/lib/datatable/js/jquery.dataTables.min.js"></script>
<script src="../resource/lib/axios/axios.min.js"></script>
<script src="../resource/js/formPublic.js"></script>
<script src="../resource/js/common.js"></script>
<script src="../tracelog/main_tracelog.js"></script>


</body>
</html>
